var curPageIdx = 1;

// header跳转的页面
var headerUrls = ['../index/index.html','../arena/arena.html','../famous_part/famous-part.html','../class/classDetail.html','../my/Record.html'];

var curMatchsJson = [
   {game_id:10001,game_if_hot:1,txt:'英雄联盟',img:'../image/test/1.png'}
  ,{game_id:10002,game_if_hot:1,txt:'球球大作战',img:'../image/test/2.png'}
  ,{game_id:10003,game_if_hot:1,txt:'王者荣耀',img:'../image/test/3.png'}
  ,{game_id:10004,game_if_hot:0,txt:'守望先锋',img:'../image/test/4.png'}
  ,{game_id:10005,game_if_hot:1,txt:'穿越火线',img:'../image/test/5.png'}
  ,{game_id:10006,game_if_hot:0,txt:'魔兽世界',img:'../image/test/6.png'}
  ,{game_id:10007,game_if_hot:0,txt:'我的世界',img:'../image/test/7.png'}
  ,{game_id:10008,game_if_hot:1,txt:'DNF',img:'../image/test/8.png'}
  ,{game_id:10009,game_if_hot:1,txt:'绝地求生',img:'../image/test/1.png'}
  ,{game_id:10010,game_if_hot:0,txt:'炉石传说',img:'../image/test/2.png'}
  ,{game_id:10011,game_if_hot:1,txt:'球球大作战',img:'../image/test/2.png'}
  ,{game_id:10012,game_if_hot:1,txt:'王者荣耀',img:'../image/test/3.png'}
  ,{game_id:10013,game_if_hot:0,txt:'守望先锋',img:'../image/test/4.png'}
  ,{game_id:10014,game_if_hot:1,txt:'穿越火线',img:'../image/test/5.png'}
  ,{game_id:10015,game_if_hot:0,txt:'魔兽世界',img:'../image/test/6.png'}
  ,{game_id:10016,game_if_hot:0,txt:'我的世界',img:'../image/test/7.png'}
  ,{game_id:10017,game_if_hot:1,txt:'DNF',img:'../image/test/8.png'}
  ,{game_id:10018,game_if_hot:1,txt:'绝地求生',img:'../image/test/1.png'}
  ,{game_id:10019,game_if_hot:0,txt:'炉石传说',img:'../image/test/2.png'}
];

var inners1 = '';
var inners2 = '';

for(var i = 0; i < curMatchsJson.length; i++){
  // 图片路径
  /*var imgSrc = curMatchsJson[i]['img'];
  if (i % 2 == 0) {
    inners1 += '<div id="speMatch_'+ (i+1) +'" class="game" style="background-image:url('+ imgSrc +')"></div>';
  }else{
    inners2 += '<div id="speMatch_'+ (i+1) +'" class="game" style="background-image:url('+ imgSrc +')"></div>';
  }*/
}
if (curMatchsJson.length % 2 != 0) {
//inners2 += '<div class="game" style="background-image:url()"></div>';
}
//getObjById('matchFirRow').innerHTML = inners1;
//getObjById('matchSecRow').innerHTML = inners2;


/********************** 触发事件 start **********************/
  var spActClsName = 'spArea_active';
  var headerActClsName = 'header_selected_li';
  
  // 搜索/收藏/播放记录
  var funcBtnActClsArr = ['search-acti','favorite-acti','history-acti'];
  var funcBtnIdArr = ['search','favorite','history'];
  var funcUrlsArr = ['../search/search.html','../history/CollectItem.html','../history/Record.html'];
  var curFuncActIdx; // 获取搜索/收藏/播放记焦点的idx，如果为0就没有焦点
  function getCurFuncActIdx(){
    var curActSearch = document.getElementsByClassName(funcBtnActClsArr[0])[0];
    var curActCollect = document.getElementsByClassName(funcBtnActClsArr[1])[0];
    var curActHistory = document.getElementsByClassName(funcBtnActClsArr[2])[0];
    if (curActSearch) {
      return 1;
    }else if (curActCollect) {
      return 2;
    }else if (curActHistory) {
      return 3;
    }else if (!curActSearch && !curActCollect && !curActHistory) {
      return 0;
    }
  }

  // document.onkeydown = focusEvent;
  function focusEvent(e){
    // 获取搜索/收藏/播放记焦点的idx，如果为0就没有焦点
    curFuncActIdx = getCurFuncActIdx();

    // 获取专区中的当前焦点的idx
    var curActiveMatch = document.getElementsByClassName(spActClsName);
    var curSelectedIdx;

    // 获取header中的li的当前焦点的index
    var curActiveLi = document.getElementsByClassName(headerActClsName);
    var curLiIdx = parseInt(curActiveLi[0].id.replace('header_li_',''));

    // 如果焦点在下面
    if (curActiveMatch.length != 0) {
      curSelectedIdx = parseInt(curActiveMatch[0].id.replace('speMatch_',''));
    }

    e = e || window.event; //这一行及下一行是为兼容IE8及以下版本
    var curWhichKey = e.which;

    switch(curWhichKey){
      case 13: // 回车/OK
        // 焦点在赛事时
        if (curActiveMatch.length != 0) {
          window.location.href = "SpecialDetail.html?curMatchId=" + curMatchsJson[curSelectedIdx-1]['game_id'] + '&isHot=' + curMatchsJson[curSelectedIdx-1]['game_if_hot'] + '&focusLiIdx=1';
        }else{
          // 焦点只在header
          if (curLiIdx != 2 && curFuncActIdx == 0) {
            // window.location.href = headerUrls[curLiIdx - 1];
          }

          // 焦点在搜索框内
          if (curFuncActIdx != 0) { // 先不跳到搜索页面
            window.location.href = funcUrlsArr[curFuncActIdx-1];
          }
        }
        break;

      case 27: // ESC
        window.history.back();
        break;    

      case 37: // 左
        if (curActiveMatch.length == 0) { // 只有header有焦点
          if (curFuncActIdx == 0) {
            if (curLiIdx != 1) {
              setFocus('header_li_'+curLiIdx,headerActClsName,'header_li_'+(curLiIdx-1),headerActClsName,2);
              // 设置focused
              setFocus('header_li_'+curLiIdx,'header_only_foucused_li','header_li_'+(curLiIdx-1),'header_only_foucused_li',2);
            }
            window.location.href = headerUrls[curLiIdx - 2];
          }else {
            setFocus(funcBtnIdArr[curFuncActIdx-1],funcBtnActClsArr[curFuncActIdx-1],funcBtnIdArr[curFuncActIdx-2],funcBtnActClsArr[curFuncActIdx-2],2);
          }
          
        }else{  // 焦点在赛事
          setFocus('speMatch_'+curSelectedIdx,spActClsName,'speMatch_'+(curSelectedIdx-2),spActClsName,2);
          scrollPage((curSelectedIdx-2),0);
        }
        break;

      case 38: // 上
        if (curActiveMatch.length == 0) { // 只有header有焦点
          if (curFuncActIdx == 0) {
            setFocus('','',funcBtnIdArr[0],funcBtnActClsArr[0],1);
            curFuncActIdx = getCurFuncActIdx();
            // 移除focused
            setFocus('header_li_'+curLiIdx,'header_only_foucused_li','','',0);
          }
        }else{
          // 焦点在第二行
          if (curSelectedIdx % 2 == 0) {
            setFocus('speMatch_'+curSelectedIdx,spActClsName,'speMatch_'+(curSelectedIdx-1),spActClsName,2);
          }else{ // 焦点在第一行
            setFocus('speMatch_'+curSelectedIdx,spActClsName,'','',0);
            // 设置focused
            setFocus('','','header_li_'+curLiIdx,'header_only_foucused_li',1);
            scrollPage('',1);
          }
        }
        break;

      case 39: // 右
        if (curActiveMatch.length == 0) {
          if (curFuncActIdx == 0) { // 只有header有焦点
            if (curLiIdx != 5) {
              setFocus('header_li_'+curLiIdx,headerActClsName,'header_li_'+(curLiIdx+1),headerActClsName,2);
              // 设置focused
              setFocus('header_li_'+curLiIdx,'header_only_foucused_li','header_li_'+(curLiIdx+1),'header_only_foucused_li',2);
            }
            window.location.href = headerUrls[curLiIdx];
          }else {
            setFocus(funcBtnIdArr[curFuncActIdx-1],funcBtnActClsArr[curFuncActIdx-1],funcBtnIdArr[curFuncActIdx],funcBtnActClsArr[curFuncActIdx],2);
          }
          
        }else{
          setFocus('speMatch_'+curSelectedIdx,spActClsName,'speMatch_'+(curSelectedIdx+2),spActClsName,2);
          scrollPage((curSelectedIdx+2),0);
        }
        break;
      
      case 40: // 下
        // 首次进入
        if (curActiveMatch.length == 0) { // 只有header有焦点
          if (curFuncActIdx == 0) {
            setFocus('','','speMatch_1',spActClsName,1);
            // 移除focused
            setFocus('header_li_'+curLiIdx,'header_only_foucused_li','','',0);
          }else {
            setFocus(funcBtnIdArr[curFuncActIdx-1],funcBtnActClsArr[curFuncActIdx-1],'','',0);
            // 设置focused
            setFocus('','','header_li_'+curLiIdx,'header_only_foucused_li',1);
          }
        }else{
          // 焦点在第一行时
          if (curSelectedIdx % 2 != 0) {
            var curAddValue = 1;
            if (curSelectedIdx == curMatchsJson.length) { // 焦点第一行的最后一个且下方没有内容
              curAddValue = -1;
            }
            setFocus('speMatch_'+curSelectedIdx,spActClsName,'speMatch_'+(curSelectedIdx+curAddValue),spActClsName,2);
          }
        }
        break;
    }

    // 如果焦点在赛事中，header焦点只能在专区
    if (curActiveMatch.length != 0 || curFuncActIdx != 0) {
      setFocus('header_li_'+curLiIdx,headerActClsName,'header_li_2',headerActClsName,2);
    }
  }
/********************** 触发事件 end **********************/

/************************ 滚屏事件 start ************************/
  /*
   * nextIdx: 焦点要移动到的下一个的idx
   * isClear: 为1时，右侧内容无焦点，页面回到顶部
   */
  function scrollPage(nextIdx,isClear){
    
    // marginTop值
    var scrollMT;

    if (isClear == 1) {
      scrollMT = 0;
    }else {
      var scrollVal = -24.44;
      
      // 一行的最后一个
      var maxNum = Math.ceil(curMatchsJson.length / 2);
      var nextNum = Math.ceil(nextIdx / 2);

      // 开始滚动的个数
      var firScrollNum = 5;

      if (nextNum >= firScrollNum && nextNum <= maxNum) {
        scrollMT = scrollVal * (nextNum - firScrollNum + 1);
      }else if (nextNum < firScrollNum) {
        scrollMT = 0;
      }
    }
    
    getObjById('matchFirRow').style.marginLeft = scrollMT + 'em';
    getObjById('matchSecRow').style.marginLeft = scrollMT + 'em';
  }
/************************ 滚屏事件 end ************************/




